<template>
  <div class="img-directive" >
    <ul>
      <li v-img="item.url" v-for="(item, index) in imgList" :key="index"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "imgDirective",
  data() {
    return {
      imgList: [
        {
          url: require("../assets/img/default-fy-logo.png")
        },
        {
          url: require("../assets/img/default-fy-logo.png")
        },
        {
          url: require("../assets/img/default-fy-logo.png")
        }
      ]
    }
  },
  // directives: {
  //   img: {
  //     bind: (el, binding) => {
  //       let color = Math.floor(Math.random() * 1000000)
  //       el.style.backgroundColor = `#${color}`
  //       let img = new Image()
  //       img.src = binding.value
  //       img.onload = function() {
  //         el.style.backgroundImage = `url(${binding.value})`
  //       }
  //     }
  //   }
  // }
}
</script>
<style lang="scss" scoped>
ul{
  li {
    width: 100px;
    height: 100px;
  }
}
</style>